<template>
  <div class="background-box">
    <el-row>
      <div style="position: fixed;right: 2%;top:10%;z-index: 999;">
        <el-badge :value="amount" class="item">
          <el-button type='primary' icon="el-icon-message" @click="notice">通知</el-button>
        </el-badge>
      </div>

      <!-- <el-col>
        <el-button-group>
          <el-button></el-button>
          <el-button></el-button>
          <el-button></el-button>
        </el-button-group>
      </el-col> -->

      <br>
      <br>
      <el-col :span="24" :style="{padding: '30px'}">
        <div>
          <el-carousel :interval="4000" type="card" height="400px">
            <el-carousel-item v-for="item in images" :key="item">
              <img :src="require('@/assets/carousel/' + item)" class="image">
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      
      <!-- 折叠 -->
      <el-col>
        <div>
          <el-row>
            <el-col :span="24" :style="{padding: '30px'}">
              <div style="padding: 30px;">
                <el-collapse v-model="activeNames">
                  <el-collapse-item title="心态" name="1">
                    <div>为了让瀑布奔向江湖大海，纵然面对百米的深渊，它依旧咆哮着，永不退缩。</div>
                    <div>生活就像人生的一页书，不管翻到哪一页，都要保持一颗乐观向上的心态。</div>
                    <div>你可以看看哈佛的校训，即使现在对手不断翻书，我也记不起来了。</div>
                  </el-collapse-item>
                  <el-collapse-item title="情绪" name="2">
                    <div>管理好你的情绪，让舒畅，让人生优雅。决定情绪，情绪决定，决定心境，心境决定生活。好，一切安好。好心态，一半在性格，一半在涵养。性格怎样，看你和什么人在一块;涵养如何，看你怎样要求自己。打造好心态，管理好情绪，不以物喜，不以己悲，淡然自在，从容优雅，常在。</div>
                    
                  </el-collapse-item>
                  <el-collapse-item title="勇敢" name="3">
                    <div>勇敢的做自己，不要为任何人而改变。如果他们不能接受最差的你，也不配拥有最好的你;不能拥有的东西倒不如从未拥有过，就像没有见过太阳，也许就能忍受黑暗，可若是见了太阳再回到黑暗中，就会愈发觉得寂寞荒凉;你可以因为某人变得成熟，但不要因为他而变得世俗。</div>
                  </el-collapse-item>
                  <el-collapse-item title="目标" name="4">
                    <div>每天都进步一点点，多年后你会惊讶地发现生活中发现的变化，每次一点点的进步，最终都会带来一场“翻天覆地”的变化，持续的行动，始终坚持自已的信念，才会看到成功的影子，才能追逐成功的方向。</div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <el-col :style="{padding: '90px'}">
        <div style="background-color: azure;">
          浔阳江头夜送客，枫叶荻花秋瑟瑟。
          主人下马客在船，举酒欲饮无管弦。
          醉不成欢惨将别，别时茫茫江浸月。
          忽闻水上琵琶声，主人忘归客不发。
          寻声暗问弹者谁，琵琶声停欲语迟。
          移船相近邀相见，添酒回灯重开宴。
          千呼万唤始出来，犹抱琵琶半遮面。
          转轴拨弦三两声，未成曲调先有情。
          弦弦掩抑声声思，似诉平生不得志。
          低眉信手续续弹，说尽心中无限事。
          轻拢慢捻抹复挑，初为《霓裳》后《六幺》。
          大弦嘈嘈如急雨，小弦切切如私语。
          嘈嘈切切错杂弹，大珠小珠落玉盘。
          间关莺语花底滑，幽咽泉流冰下难。
          冰泉冷涩弦凝绝，凝绝不通声暂歇。
          别有幽愁暗恨生，此时无声胜有声。
          银瓶乍破水浆迸，铁骑突出刀枪鸣。
          曲终收拨当心画，四弦一声如裂帛。
          东船西舫悄无言，唯见江心秋月白。

          沉吟放拨插弦中，整顿衣裳起敛容。
          自言本是京城女，家在虾蟆陵下住。
          十三学得琵琶成，名属教坊第一部。
          曲罢曾教善才服，妆成每被秋娘妒。
          五陵年少争缠头，一曲红绡不知数。
          钿头银篦击节碎，血色罗裙翻酒污。
          今年欢笑复明年，秋月春风等闲度。
          弟走从军阿姨死，暮去朝来颜色故。
          门前冷落鞍马稀，老大嫁作商人妇。
          商人重利轻别离，前月浮梁买茶去。
          去来江口守空船，绕船月明江水寒。
          夜深忽梦少年事，梦啼妆泪红阑干。

          我闻琵琶已叹息，又闻此语重唧唧。
          同是天涯沦落人，相逢何必曾相识！
          我从去年辞帝京，谪居卧病浔阳城。
          浔阳地僻无音乐，终岁不闻丝竹声。
          住近湓江地低湿，黄芦苦竹绕宅生。
          其间旦暮闻何物？杜鹃啼血猿哀鸣。
          春江花朝秋月夜，往往取酒还独倾。
          岂无山歌与村笛，呕哑嘲哳难为听。
          今夜闻君琵琶语，如听仙乐耳暂明。
          莫辞更坐弹一曲，为君翻作《琵琶行》。

          感我此言良久立，却坐促弦弦转急。
          凄凄不似向前声，满座重闻皆掩泣。
          座中泣下谁最多？江州司马青衫湿。
        </div>
        
      </el-col>
      


    </el-row>

    <el-collapse-transition>
    <div class="notice-box" v-show="visible">
      <el-card class="box-card">
        <div style="font-size: 18px;">通知</div>
        <div style="width: 760px;height: 200px;overflow-y:scroll;overflow-x:hidden;">
          <el-row>
            <el-col :span="24" v-for="(data,index) in notices" :key="data">
              <div class="grid-content bg-purple-dark" style="border-radius: 4px;background-color:azure;padding: 10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2)">  
                <div style="font-size: 20px;">
                    <strong>
                     {{ data.title }}
                    </strong>
                  </div>
                  <div>
                    {{ data.content }}
                  </div>
                  <div>
                    <el-button type="primary" size="small" @click="receive(data.id)">收到</el-button>
                  </div>
                  <div style="font-size: 12px;">
                    {{ data.updateTime }}
                    {{ data.updateUser }}
                  </div>
                  <el-divider><i class="el-icon-bell">{{ index + 1 }}</i></el-divider>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="position: absolute;bottom: 1%;left: 2%;">
          <el-button size="small" @click="closenotice">关闭</el-button></div>
      </el-card>
      <br>
      <el-card class="box-card" >
        <div style="font-size: 18px;">日期时间</div>
        <br>
        <div style="font-size: 25px; text-align: center;">{{ time }}</div>
        <div style="font-size: 35px; text-align: center;">{{ date }}</div>
      </el-card>
    </div>
  </el-collapse-transition>

  </div>
</template>

<script>
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'
import axios from "axios"
Vue.component(CollapseTransition.name, CollapseTransition)
export default {
    data () {
        return {
            activeNames: ['1'],
          /* 素材 https://so.gushiwen.cn/mingjus/default.aspx?astr=%e6%9d%8e%e8%b4%ba */
            images:['1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png','11.png','12.png','13.png','14.png','15.png','16.png',],
            amount:null,
            date:'',
            time:'',
            visible:false,
            notices:[],
        }
    },
    methods: {
      update_clock:function(){
            var d = new Date();
            var year = d.getFullYear();
            var mon = d.getMonth() + 1;            
            var day = d.getDate();            
            var hour = d.getHours();            
            var minu = d.getMinutes();
            var sec = d.getSeconds();
            if(year<10){
                year = "0" + year;
            }
            if(mon<10){
                mon = "0" + mon;
            }
            if(day<10){
                day = "0" + day;
            }
            if(hour<10){
                hour = "0" + hour;
            }
            if(minu<10){
                minu = "0" + minu;
            }
            if(sec<10){
                sec = "0" + sec;
            }
            this.time = hour + ":" + minu + ":" + sec;
            this.date = year + "/" + mon + "/" + day;            
        },
        notice(){
          this.visible=true
        },
        closenotice(){
          this.visible=false
        },
        getnotice(){
          axios.get(this.url + "/user/notices",{
            params:{
              "username":localStorage.username
            }
          }).then((res) => {
            if(res.data.code == 1){
              this.notices = res.data.data
              this.amount = this.notices.length
            }
          }).catch(() => {
            this.$message.error("信息加载失败")
          });
        },
        receive(val){
          axios.post(this.url + "/user/rnotice",{
            "id":val,
          }).then((res) => {
            if(res.data.code == 1){
              this.getnotice()
              this.$message.success("操作成功")
            }
          }).catch(() => {
            this.$message.error("发送失败")
          });
        }
    },
    mounted () {
      axios.get(this.url + "/user/notices",{
            params:{
              "username":localStorage.username
            }
          }).then((res) => {
            if(res.data.code == 1){
              this.notices = res.data.data
              this.amount = this.notices.length
            }
          }).catch(() => {
            this.$message.error("信息加载失败")
          });

        this.update_clock()
        /* 一秒调用一次 */
        this.$nextTick(()=>(
            setInterval(this.update_clock,1000)
        ));
    }
}
</script>

<style scoped>
    .notice-box{
      position: fixed;
      right: 2%;
      top:10%;
      line-height: 40px;
      width: 800px;
      height: 660px;
      z-index: 999;
    }

    .el-card{
      position: relative;
      width: 800px;
      height: 300px;
      border-radius: 15px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }

    .el-row{
      line-height: 50px;
    }

    .background-box{
      position: absolute;
      width: 100%;
      height: 100%;
      overflow-y:scroll;
      overflow-x:hidden;
    }

    .image {
      width: 800px;
      height: 400px;
      display: block;
    }

    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.8;
      line-height: 200px;
      margin: 0;
    }
    
    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
</style>